<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-permission="'adminParam.add'">创建</el-button>
    <div class="filter-container">
      <el-select class="filter-item" style="width: 240px;" v-model="query.paramType" @change="research" filterable
        clearable placeholder="选择参数类型">
        <el-option v-for="(d,i) in typeOptions" :value="d.param_type" :key="i"></el-option>
      </el-select>
      <el-input style="width: 300px;" placeholder="输入查询条件按回车" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出
      </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:operation="v">
        <a href="#" class="text-blue" @click.prevent="editItem(v.row,v.$index)" v-permission="'adminParam.edit'">编辑</a>
        <span>&nbsp;</span>
        <a href="#" class="text-green" @click.prevent="copyItem(v.row,v.$index)" v-permission="'adminParam.add'">复制</a>
        <span>&nbsp;</span>
        <a href="#" class="text-red" @click.prevent="deleteItem(v.row,v.$index)"
          v-permission="'adminParam.delete'">删除</a>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  components: {},
  name: 'adminParam',
  data: function () {
    return {
      api: this.$api.param,
      name: '系统参数',
      columns: [
        { title: '参数类型', key: 'param_type', width: 160 },
        { title: '参数名称', key: 'param_name', width: 180 },
        { title: '优先级', key: 'param_priority', width: 80 },
        { title: '参数值', key: 'param_value', width: 180 },
        { title: '参数条件1', key: 'param_condition1', width: 100 },
        { title: '参数条件2', key: 'param_condition2', width: 100 },
        { title: '参数条件3', key: 'param_condition3', width: 100 },
        { title: '备注', key: 'remarks' },
        { title: '修改人', key: 'modify_user', width: 90 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      fields: [
        { title: '参数类型', key: 'param_type', required: true },
        { title: '参数名称', key: 'param_name', required: true },
        { title: '优先级', key: 'param_priority', required: true, name: 'number' },
        { title: '参数值', key: 'param_value' },
        { title: '参数条件1', key: 'param_condition1' },
        { title: '参数条件2', key: 'param_condition2' },
        { title: '参数条件3', key: 'param_condition3' },
        {
          title: '备注',
          key: 'remarks',
          name: 'textarea',
          required: true,
          tips: '请尽可能的描述清楚此参数的作用，以及使用到的值所代表的含义',
        },
      ],
      tableProps: {
        border: true,
        opsColWith: 120,
      },
      typeOptions: [],
    }
  },
  methods: {
    copyItem(v) {
      this.data = _.cloneDeep(this.initData)
      this.pageLoading = true
      this.$request(this.api + 'getbyid', {
        id: v.id,
      })
        .then((r) => {
          this.pageLoading = false
          this.data = this.formatAfterGet(r)
          this.data.id = null
          this.editFormVisible = true
        })
        .catch(() => {
          this.pageLoading = false
        })
    },
  },
  created: function () {
    this.getList()
    this.$request(this.api + 'gettypelist').then((r) => {
      this.typeOptions = r
    })
  },
}
</script>
<style scoped>
</style>
